<template>
    <div>
        <div class="mui-card swiper">
            <swiper :lunbotuList="lunbotuList" :isfull="false"></swiper>
        </div>

        <div class="mui-card">
            <!-- 头部 -->
            <div class="mui-card-header middle-box-header"><h4>{{ goodsmessage.title}}</h4></div>
            <div class="mui-card-content">  
                <div class="mui-card-content-inner middle-box-b">
                   <p>市场价：<span style="text-decoration:line-through">￥{{goodsmessage.market_price}}</span>&nbsp;&nbsp;销售价:<span class="red">￥{{goodsmessage.sell_price}}</span></p>
                   <p class="cal-box">购买数量：<numbox @getcount="getgoodscount" :max="goodsmessage.stock_quantity"></numbox></p>
                    <div>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addshopcar">加入购物车</mt-button>
                    </div>

                </div>

            </div>
        </div>
        <transition
                    @before-enter="bEnter"
                    @enter="Enter"
                    @after-enter="aEnter"
                    >
                    <div class="ball" v-show="this.show" ref="ball"></div>
        </transition>
        <div class="mui-card">
            <div class="mui-card-header"><h4>商品参数</h4></div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                   <h6>商品编号：{{goodsmessage.goods_no}}<span></span></h6>
                   <h6>库存情况：{{goodsmessage.stock_quantity}}<span></span></h6>
                   <h6>上架时间：{{goodsmessage.add_time}}<span></span></h6>
                </div>
            </div>
            <div class="mui-card-footer footer">
                <mt-button type="primary" size="large" plain class="btn" @click="togoodsparams">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="togoodscomments">评价详情</mt-button>
            </div>
        </div>
        
    </div>
    
    
</template>

<script>
import swiper from "../swiper/swipe.vue"
import numbox from "../numbox/numbox.vue"


export default {
    data(){
        return{
            id:this.$route.params.id,
            lunbotuList:[],
            goodsmessage:[],
            show: false,
            selectcount:1
        }
    },
    created(){
        this.getlunbotu()
        this.goodsmsg()
    },
    methods:{
        getlunbotu() {
           this.$http.get("api/getthumimages/"+this.id).then(function(result){
               if(result.body.status === 0){
                   result.body.message.forEach(item => {
                       if(item.src){
                            item.img=item.src
                       }                
                   });
                   this.lunbotuList = result.body.message;
               }
              
           })
       },
        goodsmsg(){
            this.$http.get("api/goods/getinfo/"+this.id).then(result=>{
                if(result.body.status === 0){
                    this.goodsmessage = result.body.message[0]
                }
            })
        },
        togoodsparams(){
            this.$router.push({path:"/home/goodsparams/"+this.id})
        },
        togoodscomments(){
            this.$router.push({path:"/home/goodscomments/"+this.id})
        },
        addshopcar(){
            this.show = !this.show
            let shopcar = 
                {id:this.id, 
                count:this.selectcount,
                price:this.goodsmessage.sell_price,
                selected:true
                }
                console.log(shopcar)
            this.$store.commit("changecar",shopcar)
        },
        bEnter(el){
            el.style.transform="translate(0,0)"
             //表示动画入场之前，坐标表示位置是在起始
        },
        Enter(el,done){
            el.offsetWidth
            // this.refs.[refName] 返回真实的 DOM 节点
                const rejectBall = this.$refs.ball.getBoundingClientRect();
                const rejectBadge = document.getElementById("badge").getBoundingClientRect();
                var rejectX = rejectBadge.left - rejectBall.left;
                var rejectY = rejectBadge.top - rejectBall.top;
            //es6模板字符串
            el.style.transform = `translate(${rejectX}px,${rejectY}px)`
            el.style.transition= "all 0.5s ease"
             //done是enter方法的原生的引用函数名，这里表示是回调函数，也就是接下来执行的操作aEnter（），消灭延迟效果。 
            done()
        },
        aEnter(el){
            this.show = !this.show
        },
        getgoodscount(count){
            this.selectcount = count
        }
        
    },
    components:{
        swiper,
        numbox
    }
}
</script>

<style lang="less" scoped>
 .ball{
            width: 15px;
            height: 15px;
            background-color: red;
            border-radius: 50%;
            position:absolute;
            top: 372px;
            left:136px;
            z-index: 999;
        }
    .swiper{
        text-align: center
    }
    .middle-box-header{
        h4{
            font-size: 14px
        }
    }
    .middle-box-b{
       
        p{
            color:black;
            font-size: 12px;
        }
        .red{
            color: red;
            font-size: 15px;
            font-weight: bold
        }
        .cal-box{
        margin-bottom: 10px
    }
    }
    
    .footer{
        display:flex;
        flex-direction: column;
        .btn{
            margin-bottom: 10px;
        }
    }
</style>

